<template>
	<view>
		<view class="fjc py4">报表内容显示不全时,可左右滑动</view>
		<view class="f bgw bd" v-if="list.length>0">
			<view class="bgw f1">
				<view class="bgw ps z5 bb" :style="{top:top+'px'}">
					<slot name="start" class=""/>
				</view>
				<slot name="left" />
			</view>
			<view :class="'w' + width">
				<scroll-view @scroll="scroll" :scroll-x="true" :scroll-left="left" class="ps z5 bgw" :style="{top:top+'px'}">
					<slot name="head" />
				</scroll-view>
				<scroll-view @scroll="scroll" :scroll-x="true" :scroll-left="left" class="bgw">
					<slot name="default" />
				</scroll-view>
			</view>
		</view>
		<view v-if="state==2&&list.length==0" class="fjc hv6">
			<u-empty text="暂无数据" mode="data" />
		</view>
		<view v-else-if="state==1&&list.length==0&&page==1" class="fjc hv6">
			<Loading />
		</view>
		<view v-else-if="state==1&&list.length>0&&page>1" class="fjc py6">
			<text class="icon fs50 c9">&#xe693;</text>
			<text class="ml4 c9">加载中</text>
		</view>
		<view v-else-if="page>1&&list.length>0&&list.length==total" class="fjc py6">
			<text class="c9">页面到底啦~</text>
		</view>
		<view class="h15"></view>
		<view class="z1 pf b0 p5 bgw">
			<button type="primary" @click="actShow=true">导出报表</button>
		</view>
		<view class="h15"/>
		<u-modal :show="tShow" @confirm="ok" :show-title="false" ref="uModal" :show-cancel-button="true" :async-close="true">
			<u-form label-position="top" :model="params" ref="uForm">
				<text>请填写接收报表的邮箱</text>
				<u-form-item prop="email" :border-bottom="false">
					<u-input v-model:value="params.email" placeholder="例: Liming1990@qq.com" maxlength="150" class="bb"/>
				</u-form-item>
			</u-form>
		</u-modal>
	</view>
</template>

<script lang="ts">
import util from '@/utils/util'
import {form} from '@/mixins'

export default {
	mixins: [form],
	props: {
		width: {
			type: [String, Number],
			default: 55,
		},
		outputPath: {
			type: [String, Number],
			default: ''
		},
		querys: {
			type: Object,
			default: () => {}
		}
	},
	data () {
		return {
			params: {email: ''},
			actShow: false,
			left: 0,
			rules: {
				email: [{
					type: 'string',
					validator: (r, v) => this.$u.test.email(v),
					required: true,
					message: '请输入邮箱名称',
					trigger: ['blur', 'change']
				}]
			},
			// #ifdef H5
			top: 40
			// #endif
			// #ifndef H5
			top: 0
			// #endif
		}
	},
	created() {
		this.formPath = this.outputPath
		Object.assign(this.params, this.querys) 
	},
	computed: {
		state() {
			// #ifdef H5
			return this.$parent.$parent.loadstate
			// #endif
			// #ifndef H5
			return this.$parent.loadstate
			// #endif
		},
		list() {
			// #ifdef H5
			return this.$parent.$parent.list
			// #endif
			// #ifndef H5
			return this.$parent.list
			// #endif
		},
		page() {
			// #ifdef H5
			return this.$parent.$parent.page
			// #endif
			// #ifndef H5
			return this.$parent.page
			// #endif
		},
		total() {
			// #ifdef H5
			return this.$parent.$parent.total
			// #endif
			// #ifndef H5
			return this.$parent.total
			// #endif
		}
	},
	methods: {
		scroll(e){
			this.left = e.detail.scrollLeft
		},
		afterSubmit(res){
			util.msg('发送成功', 'success')
		}
	}
}
</script>
